/**
 * Created by apple on 2018/2/23.
 */
requireJS(['constant', 'site', 'handlebars'], function (Constant, site, Handlebars) {

    var url = {
        myProductOrderStatisic: "manager/myProductOrderStatisic.do"
    }

    var typeNameData = [];
    var typeRatio = [];
    var typeNum = [];
    var series = [];
    var time = [];
    var legend = [];

    window.devicePixelRatio = 2;

    // 圆柱表
    site.send({
        url: url.myProductOrderStatisic,
        callback: function (data) {
            data = JSON.parse(data);
            if (data.type == '1') {
                $.each(data.content,function (ele, i) {
                    var lineData = [];
                    $.each(i,function(e,ii){
                        lineData.push(ii.num);
                    })
                    /*// typeNameData.push(data.content.typeName)
                    typeNameData.push(ele.type_name)
                    typeNum.push(ele.type_num)
                    typeRatio.push({name: ele.typeRatio})*/
                    series.push({
                        name: i[0].product_name,
                        type: 'line',
                        data: lineData
                    })
                    legend.push(i[0].product_name);
                })
                $.each(data.content[0],function(ele,i){
                    time.push(i.startTime.substring(6) + '-' + i.endTime.substring(6,10));
                })

                echar_fun();
            } else {
                Constant.fn.Message("F", data.msg);
            }
        },
    })


    /*var clientState = data.content;
    clientState.forEach(function (ele, i) {
        // typeNameData.push(data.content.typeName)
        typeNameData.push(ele.typeName)
        typeNum.push(ele.typeNum)
        typeRatio.push({name: ele.typeName})

    })*/


    var echar_fun = function () {
        // 路径配置
        requirejs.config({
            paths: {
                 echarts: baseUrlStr + 'static/plugins/echarts'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/line',//需要加载line模块
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                if (!document.getElementById('echar7')) {
                    return;
                }
                var myChart = ec.init(document.getElementById('echar7'));

                /*var option = {
                    title: {
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        showDelay: 0,
                        formatter: function (params) {
                            var colorList = [
                                '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                            ]
                            var color = colorList[params.dataIndex];//图例颜色
                            var htmlStr = '<div>';
                            htmlStr += params.seriesName + '<br/>';//x轴的名称
                            //为了保证和原来的效果一样，这里自己实现了一个点的效果
                            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
                            //添加一个汉字，这里你可以格式你的数字或者自定义文本内容
                            htmlStr += params.name + '：' + params.value + '';
                            htmlStr += '</div>';
                            return htmlStr;
                        }
                    },

                    grid: {
                        borderWidth: 0,
                        y2: 60,
                        right: '5%',
                        left: '5%',

                    },
                    xAxis: [
                        {
                            type: 'category',
                            show: true,
                            data: typeNameData,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#000',
                                }
                            },
                            splitLine: {
                                show: false
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            show: true,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#000',
                                }
                            },

                        }
                    ],
                    series: series

                }*/
                var option = {
                    title: {
                        x: 'center'
                    },
                    /*tooltip: {
                        trigger: 'item',
                        showDelay: 0,
                        formatter: function (params) {
                            var colorList = [
                                '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                            ]
                            var color = colorList[params.dataIndex];//图例颜色
                            var htmlStr = '<div>';
                            htmlStr += params.seriesName + '<br/>';//x轴的名称
                            //为了保证和原来的效果一样，这里自己实现了一个点的效果
                            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
                            //添加一个汉字，这里你可以格式你的数字或者自定义文本内容
                            htmlStr += params.name + '：' + params.value + '';
                            htmlStr += '</div>';
                            return htmlStr;
                        }
                    },*/
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data: legend
                    },
                    /*legend: {
                        data: ['最高气温', '最低气温']
                    },*/
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: time
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            /*axisLabel: {
                                formatter: '{value} °C'
                            },*/
                        }
                    ],
                    /*series: [
                        {
                            name: '产品订单状态统计',
                            type: 'line',
                            /!*data: [11, 11, 15, 13, 12, 13, 10],*!/
                            /!*markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },*!/
                            /!*markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }*!/
                            "data": typeNum,
                        },
                        /!*{
                            name: '最低气温',
                            type: 'line',
                            data: [1, -2, 2, 5, 3, 2, 0],
                            markPoint: {
                                data: [
                                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        }*!/
                    ]*/
                    series:series
                };
                // 为echarts对象加载数据
                myChart.setOption(option);

                window.onresize = myChart.resize;


            }
        );
    }
    // 圆柱表
    // $(document).on('pjax:complete', function () {
    //
    //
    // });
    $(document).ready(function () {
        echar_fun();
    })

});